<template>
  <div class="Edit" v-if="profile">
    <TopNav title="编辑资料" />
    <div class="photo">
      <img v-if="profile.head_img" :src="$axios.defaults.baseURL+profile.head_img" alt />
      <img v-else src="@/assets/logo.png" alt />
      <!-- 文件上传组件 -->
      <van-uploader :after-read="afterRead" class="get" />
    </div>
    <PersonalBar label="昵称" :desc="profile.nickname" @barclick="isShowNickname=true" />
    <PersonalBar label="密码" desc="******" @barclick="isShowPassword=true" />
    <PersonalBar label="性别" :desc="profile.gender==1?'男':'女'" @barclick="isshowGender=true" />
    <!-- 修改弹窗 -->
    <van-dialog v-model="isShowNickname" title="昵称" @confirm="confirmNickname">
      <van-field v-model="nickname" placeholder="请输入新昵称" />
    </van-dialog>
    <van-dialog v-model="isShowPassword" title="密码" @confirm="confirmPassword">
      <van-field v-model="password" placeholder="请输入新密码" />
    </van-dialog>

    <van-action-sheet
      v-model="isshowGender"
      :actions="genderList"
      @select="confirmGender"
      cancel-text="取消"
    />
  </div>
</template>

<script>
import TopNav from "@/components/TopNav";
import PersonalBar from "@/components/PersonalBar";
export default {
  data() {
    return {
      profile: "",
      isShowNickname: false,
      nickname: "",
      isShowPassword: false,
      password: "",
      isshowGender: false,
      genderList: [
        //   里面可以加属性
        {
          name: "男",
          type: 1
        },
        {
          name: "女",
          type: 0
        }
      ]
    };
  },
  components: {
    TopNav,
    PersonalBar
  },
  mounted() {
    this.loadPage();
  },
  methods: {
    afterRead(fileObj) {
      //图片存在于fileObj.file;
      //   拿到图片先使用formData转换为二进制
      const formData = new FormData();
      formData.append("file", fileObj.file);
      this.$axios({
        url: "/upload",
        method: "POST",
        data: formData,
        headers: {
          Authorization: localStorage.getItem("token")
        }
      }).then(res => {
        const { message, data } = res.data;
        console.log(data.url);
        const newData = {
          head_img: data.url
        };
        this.editData(newData);
      });
    },
    loadPage() {
      this.$axios({
        url: "/user/" + localStorage.getItem("userId"),
        method: "get",
        headers: {
          Authorization: localStorage.getItem("token")
        }
      }).then(res => {
        console.log(res.data);
        this.profile = res.data.data;
      });
    },
    confirmNickname() {
      console.log("当前的最新昵称" + this.nickname);
      if (this.nickname) {
        const newData = {
          nickname: this.nickname
        };
        this.editData(newData);
        this.nickname = "";
      }
    },
    confirmPassword() {
      console.log("当前的最新密码" + this.password);
      if (this.password) {
        const newData = {
          password: this.password
        };
        this.editData(newData);
        this.password = "";
      }
    },
    confirmGender(item) {
      // 可以接受一个item参数代表选中的gendList数组中的对象,gendList中数组相对应的值会传过来
      console.log("选中了一个性别选项");
      console.log(item.name); //性别男或女
      console.log(item.type); //性别0或1,这才是我们需要传的
      const newData = {
        gender: item.type
      };
      this.editData(newData);
      this.isshowGender = false;
    },
    editData(newData) {
      this.$axios({
        url: "/user_update/" + localStorage.getItem("userId"),
        method: "POST",
        headers: {
          Authorization: localStorage.getItem("token")
        },
        data: newData
      }).then(res => {
        console.log(res.data);
        if (res.data.message == "修改成功") {
          this.loadPage();
        }
      });
    }
  }
};
</script>

<style lang='less'>
body {
  background-color: #f2f2f2;
  .Edit {
    .photo {
      display: flex;
      justify-content: center;
      position: relative;
      img {
        width: 19.444vw;
        height: 19.444vw;
        border-radius: 50%;
        // background-color: red;
        margin: 10vw 0;
      }
      .get {
        position: absolute;
        top: 8.333vw;
        right: 38.889vw;
        opacity: 0;
      }
    }
  }
}
</style>